<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .leftbox {
            float: left;
            border:1px solid #cccccc;
            position: relative;
        }
        .rightbox {
            float:left;
            margin-left: 10px;
            width: 500px;
            height:500px;
            border:1px solid blue;
            overflow: hidden;
        }
        .rightbox  {
            display: none;
        }
        #marking {
            width: 50px;
            height: 50px;
            background-color: rgba(255,0,0,0.3);
            position: absolute;
            top:0;
            left:0;
            cursor:move;
        }
    </style>
</head>
<body>
<div class="leftbox" id="leftbox">
    <img src="image/s.jpg">
    <div id="marking"></div>
</div>
<div class="rightbox" id="rightbox">
    <img src="image/b.jpg">
</div>
<script>
    var leftOjb = document.getElementById("leftbox");
    var smallImg = leftOjb.children[0];
    var marking = leftOjb.children[1];
    var bigImg = document.getElementById("rightbox").children[0];


    smallImg.onmouseover = function (e) {
        bigImg.parentNode.style.display='block';
        marking.style.display = 'block';
    }
    smallImg.onmouseout = function(e) {
        bigImg.parentNode.style.display = 'none';
        marking.style.display = 'none';
    }
    smallImg.onmousemove = function (e) {
        //固定小框的边界

        //小图 与 大图 的比例

    }
</script>
</body>
</html>